<template>
  <div class="header-container">
    <div class="app-container">
      <div class="menu-cop-btn-unfold" @click="unfoldSidebar">展开</div>
      <div class="header">
        <div>Ai-Chat</div>
      </div>
      <div class="unfold-new-chat" @click="clearHistory">新对话</div>
    </div>
    <div class="sider" ref="sideBar">
      <sideBarCom ref="sideBarCom" />
    </div>
  </div>
</template>
<script>
import sideBarCom from "./sideBarCom.vue";
export default {
  components: { sideBarCom },
  methods: {
    unfoldSidebar() {
      this.$refs.sideBarCom.unfoldSidebar();
    },
    async clearHistory() {
      try {
        const response = await fetch(
          "http://47.97.49.128:59539/history/clear",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        // 如果需要处理响应数据，可以在这里进行处理
        await response.json();
        this.$emit("clearHistory");
      } catch (error) {
        console.error("Failed to clear history:", error);
      }
    },
  },
};
</script>
<style scoped>
.header {
  padding: 20px;
  text-align: center;
}
.header div {
  font-size: 25px;
  font-weight: 600;
}
.app-container {
  color: #7d7d7d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  height: 60px;
}

.app-container .menu-cop-btn-unfold {
  display: none;
}
.menu-cop-btn-unfold,
.unfold-new-chat {
  cursor: pointer;
}
.menu-cop-btn-unfold:hover,
.unfold-new-chat:hover {
  color: #333;
}
.sider {
  display: none;
}

@media (max-width: 768px) {
  .app-container .menu-cop-btn-unfold {
    display: block;
  }
  .sider {
    display: block;
  }
}
</style>